<template>
  <div class="channel-edit">
    <van-cell class="channel-title" title="我的频道" :border="false">
      <van-button
          size="mini"
          round
          type="danger"
          plain
          @click="isEdit = !isEdit"
      >
        编辑
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
          class="channel-item"
          v-for="(item, index) in myChannels"
          :key="index"
          :text="item.name"
          icon="close"
          @click="changeChannel(item, index)"
      >
        <template #text>
          <div class="text" :class="{active: active === index}">{{ item.name }}</div>
        </template>

        <template #icon>
          <van-icon v-show="isEdit && !fixedChannel.includes(item.id)" name="close"></van-icon>
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
          class="channel-item"
          v-for="item in recommendChannels"
          :key="item.id"
          text="文字"
          icon="plus"
          @click="onAddChannel(item)"
      >
        <template #text>
          <div class="text">{{ item.name }}</div>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { fetchAllchannels } from '@/api/channel'
import _ from 'lodash'

export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false,
      fixedChannel: [0, 11]
    }
  },
  computed: {
    recommendChannels () {
      return _.differenceWith(this.allChannels, this.myChannels, _.isEqual)
    }

    // recommendChannels () {
    //   //  数据的过滤
    //   return this.allChannels.filter(channeItem => {
    //     // 什么样的数据满足条件
    //     // 在mychannels内部招不到的数据
    //     const flag = this.myChannels.some(item => item.id === channeItem.id)
    //     return !flag
    //   })
    // }
  },
  watch: {},
  created () {
    this.getAllchannels()
  },
  mounted () {
  },
  methods: {
    changeChannel (channel, index) {
      if (this.isEdit) {
        if (this.fixedChannel.includes(channel.id)) {
          return this.$toast(`${channel.name}频道不允许删除`)
        }
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
      } else {
        this.$emit('update-active', index, false)
      }
    },
    // 频道的添加功能
    onAddChannel (channel) {
      this.myChannels.push(channel)
    },
    async getAllchannels () {
      try {
        const { data } = await fetchAllchannels()
        console.log(data)
        this.allChannels = data.data.channels
      } catch (e) {
        this.$toast('获取频道数据失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-title {
  margin-top: 80px;
}

.channel-edit {
  .channel-item {
    height: 86px;

    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;

      .van-grid-item__text, .text {
        color: #222;
        font-size: 20px;
      }

      .active {
        color: red;
      }
    }
  }
}

/deep/.van-grid-item__icon-wrapper {
  position: unset;
}

/deep/ .recommend-grid {
  .van-grid-item__content {
    flex-direction: row;
    color: #222;

    .van-icon {
      font-size: 24px;
    }

    .van-grid-item__text {
      font-size: 12px;
      margin-top: 0;
    }
  }
}

/deep/ .van-icon-close {
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 36px;
  color: #ccc;
}
</style>
